<template>
	<div style="border: 1px solid #ccc">
		<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef"
						 :defaultConfig="toolbarConfig" :mode="mode" />
		<Editor style="height: 300px; overflow-y: hidden;" v-model="valueHtml"
						:defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated"
						@onChange="change" />
	</div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
	components: { Editor, Toolbar },
	props: {
		id: {
			type: String,
			default: ''
		},
		name: {
			type: String,
			default: ''
		}
	},
	methods: {
		change () {
			this.$emit('change', { id: this.id, value: this.valueHtml })
		}
	},
	setup () {
		// 编辑器实例，必须用 shallowRef
		const editorRef = shallowRef()

		// const props = defineProps({
		// 	id: {
		// 		type: String,
		// 		default: ''
		// 	},
		// 	name: {
		// 		type: String,
		// 		default: ''
		// 	}
		// });

		// 内容 HTML
		const valueHtml = ref('')

		// 模拟 ajax 异步获取内容
		onMounted(() => {
			// console.log(this.id)
			// if (this.id !== '') {
			// 	this.valueHtml = `<a href="/author/${this.name}">${this.name}</a>`
			// }
		})

		const toolbarConfig = {}
		const editorConfig = { placeholder: '请输入内容...' }

		// 组件销毁时，也及时销毁编辑器
		onBeforeUnmount(() => {
			const editor = editorRef.value
			if (editor == null) return
			editor.destroy()
		})

		const handleCreated = (editor) => {
			editorRef.value = editor // 记录 editor 实例，重要！
		}

		return {
			editorRef,
			valueHtml,
			mode: 'default', // 或 'simple'
			toolbarConfig,
			editorConfig,
			handleCreated,
		};
	}
}
</script>

<style lang="scss" scoped></style>